<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人网页简介</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="begin-animate">

        <ul>
            <li>
                <p>页面加载中...</p>
            </li>
            <div class="begin-sq d21"></div>
            <div class="begin-sq d22"></div>
            <div class="begin-sq d23"></div>
        </ul>
    </div>
    <div id="head">
        <img src="./image/w2.webp" alt="">
        <span class="headsp1">Welcome You</span>
        
        <span class="headsp2">当前时间：<span class="headsp3"></span></span>
        
        
    </div>
    <div id="onecontainer">
        <div id="d1">
            <h1>我的个人基本信息</h1>
           <p>姓名：何镒鹏</p>
           <p>年龄：19</p>
           <p>所读学校：顺德职业技术学院</p>
           <p>班级：23软件技术2班</p> 
           <p>微信头像</p>
            <img src="./image/微信图片_20240316133443.jpg" alt="">
            <p><a href="https://gitee.com/yihyp/my-first-codebase.git">码库地址：https://gitee.com/yihyp/my-first-codebase.git</a></p>
        </div>
       
        <div id="d2">
            <h1>我的个人爱好</h1>
            <img src="./image/0eb396fd3b9ce9308abbfe6527e86ee3.jpg" alt="" class="d2img">
            <img src="./image/6740b7ebca9a0486704156fb0612710a.jpg" alt="" class="d2img">
            <img src="./image/95448e735bb0357c79a3076da8669bf8.jpeg" alt="" class="d2img">
            <a href="#1" class="left" onclick="a(-1)"><</a>
            <a href="#2" class="right" onclick="a(1)">></a>
            <span onclick="span(1)"></span>
            <span onclick="span(2)"></span>
            <span onclick="span(3)"></span>
        </div>
    </div>
   
    <ul id="twocontainer">
        <h1>喜欢看美丽的风景(可点击)</h1>
        <li>
            <h3>美丽的晚霞</h3>
            <img src="./image/w1.webp" alt="" class="twoimg l1">
            <div class="l1div">
                <span class="sp1">&times;</span>
                <img src="./image/w1.webp" alt="" class="limg">
                <p>晚霞如一位慈祥的老者，用柔和的笑容将天空染成了一片金黄色。轻盈的云朵像是被点燃的火焰，在夕阳的余晖中跳跃，熠熠生辉。</p>
            </div>
        </li>
        <li>
            <h3>金黄的落日</h3>
            <img src="./image/w4.webp" alt="" class="twoimg l2">
            <div class="l2div">
                <span class="sp1">&times;</span>
                <img src="./image/w4.webp" alt="" class="limg">
                <p>黄昏的余晖如同柔和的交响乐，在大地上奏响，将万物镀上了一层金色。</p>
            </div>
        </li>
        <li>
            <h3>缤纷的落叶</h3>
            <img src="./image/w5.webp" alt="" class="twoimg l3">
            <div class="l3div">
                <span class="sp1">&times;</span>
                <img src="./image/w5.webp" alt="" class="limg">
                <p>落叶如诗，如梦般的美丽，它们在秋风中轻轻摇曳，宛如秋天的精灵，为人们带来无尽的遐想。</p>
            </div>
        </li>
    </ul>
    <div id="threecontainer">
        <h1>沉浸式阅读模式</h1>
        <button id="btn">点击开始沉浸式阅读</button>
        <div id="reading">
            <div class="person">
                <p>姓名：何镒鹏</p>
                <p>年龄：19</p>
                <p>所读学校：顺德职业技术学院</p>
                <p>班级：23软件技术2班</p>
            </div>
            <div class="threeimg">
                <img src="./image/0eb396fd3b9ce9308abbfe6527e86ee3.jpg" alt="">
                <img src="./image/6740b7ebca9a0486704156fb0612710a.jpg" alt="">
                <img src="./image/95448e735bb0357c79a3076da8669bf8.jpeg" alt="">
                <img src="./image/w1.webp" alt="">
                <img src="./image/w4.webp" alt="">
                <img src="./image/w5.webp" alt="">
            </div>
            
            <span class="sp2">&times;</span>
        </div>
    </div>
    <script src="./index.js"></script>
</body>
</html>